<template>
	<z-paging-swiper>
		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
		<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
		<template #top>
			<u-navbar title="我的订单" title-color="#333" back-icon-color="#333"></u-navbar>
			<z-tabs ref="tabs" :list="tabList" :current="tabIndex" @change="changeTab" class="tab-bar" active-color="#FC7404"></z-tabs>
		</template>


		<swiper style="height: 100%;" :current="tabIndex" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
			<swiper-item class="item-order" v-for="item in tabList" :key="item.filter">
        		<user-order-list ref="childComponent" :filter="item.filter" :autoRefresh="item.filter=='all'"></user-order-list>
			</swiper-item>
		</swiper>
		<!-- <template #bottom>
			<public-tabbar></public-tabbar>
		</template> -->
		<!-- <public-fixed-box bottom>
			<public-tabbar></public-tabbar>
		</public-fixed-box> -->
	</z-paging-swiper>
</template>

<script>
	export default {
		name: "Order",
		data() {
			return {
				tabIndex: 0,
				dataList: [],
				tabList: [
					{
							name: '全部',
							filter: 'all'
						},
						{
							name: '定金待付',
							filter: 'deposit'
						},
						{
							name: '等待接单',
							filter: 'isnotb'
						},
						{
							name: '等待派单',
							filter: 'amount'
						},
						// {name: '等待派单', filter: 'isnotm'},
						{
							name: '等待上门',
							filter: 'service'
						},
						{
							name: '已完成',
							filter: 'completed'
						},
						{
							name: '维权',
							filter: 'maintanance'
						},
          ]
			};
		},
    onLoad(options) {
      if (typeof options.selectedId == 'undefined') {
        this.tabIndex = 0;
      } else {
        this.tabIndex = options.selectedId;
      }
      console.log("selectedId", options.selectedId);
      //this.tabIndex = options.selectedId;
    },
    onShow() {
      console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!Should call refresh list.");
      // uni.$emit('refreshOrder', this.tabList[this.tabIndex].filter);
    },
    onUnload() {
      // 卸载掉自动刷新列表事件
      // uni.$off('refreshOrder');
    },
		computed: {
			isActiveTab() {
			  return (index) => index === this.tabIndex;
			},
			tabBarList() {
			  return [];
			},
		},
		methods: {
			changeTab(index) {
				// console.log(1)
			  this.tabIndex = index;
			  uni.$emit('refreshOrder', this.tabList[this.tabIndex].filter);
			},
			// swiper滑动中
			swiperTransition(e) {
				// this.$refs.tabs.setDx(e.detail.dx);
			},
			// swiper滑动结束
			swiperAnimationfinish(e) {
				this.tabIndex = e.detail.current;
				// this.$refs.tabs.unlockDx();
    //     uni.$emit('refreshOrder', this.tabList[this.tabIndex].filter);
			}
		},
	};
</script>

<style lang="scss" scoped>
.tab-bar {
  padding: 0 0rpx;
  display: flex;
  justify-content: space-around;
  background-color: #fbfbfb;
  .item-tab {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    &.active {
      color: #fb7601;
      font-size: 28rpx;
      font-weight: bold;
    }
  }
}

.item-order {
  margin: 0 0rpx;
  background-color: #FFF;
  border-radius: 8rpx;
//   & + .item-order {
//     margin-top: 22rpx;
//   }
  .order-header {
    display: flex;
    height: 72rpx;
    line-height: 72rpx;
    flex-direction: row;

	.order-amount-title {
		font-size: 24rpx;
    	color: #858585;
		font-weight: normal;
	}
	.order-amount{
		font-size: 32rpx;
		color: #000000;
		font-weight: bold;
		margin-left: 15rpx;
	}
  .order-status {
    display: flex;
    flex-direction: row;
    font-size: 24rpx;
    color: #ff764c;
    width: 750rpx;
    font-weight: bold;
    flex-grow: 1;

  }
	.order-status-text {
      font-size: 24rpx;
      color: #ff764c;
      font-weight: normal;
      margin-left: auto;
    }
  }
  .order-main {
    display: flex;
    flex-direction: column;
    .order-image {
      display: block;
      width: 140rpx;
      height: 140rpx;
      border-radius: 8rpx;
      overflow: hidden;
    }
    .order-main-content {
		display: flex;
	  	flex-direction: row;
		margin-top: 20rpx;
	  .order-main-content-item {
		flex: 1;
		flex-direction: column;
		margin-left: 25rpx;
	  }
    .title {
      font-size: 28rpx;
      font-weight: bold;
    }
    .contacts {
      display: flex;
      flex-direction: row;
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
      line-height: 24rpx;
      align-items: baseline;
		.contacts-text-item {
			margin-right: 10rpx;
		}
		.contacts-medal {
			color: #fb7601;
			background-color: #ffefe2;
			padding: 10rpx;
			border-radius: 10rpx;
			margin-right: 40rpx;
		}
  }
  .extra-tips {
    margin-top: 16rpx;
    font-size: 24rpx;
    color: #ff764c;
  }
  .dot-green {
    width: 15rpx;
    height: 15rpx;
    background-color: #16d692;
    border-radius: 50%;
    color: #16d692;
    align-self: center;
  }
  .dot-black {
    width: 15rpx;
    height: 15rpx;
    background-color: #000;
    border-radius: 50%;
    color: #000;
    align-self: center;
  }
  }
}
  .price-bar {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    padding: 20rpx 0;
    font-size: 24rpx;
    .label {
      margin-left: 20rpx;
    }
    .value {
      font-size: 26rpx;
      font-weight: bold;
    }
  }
  .button-group {
    margin: 10rpx 0;
    display: flex;
    justify-content: flex-end;
	margin-top: 30rpx;
    .item-btn {
      align-self: center;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      padding: 0 20rpx;
      height: 56rpx;
      border: 1px solid #888;
      border-radius: 10rpx;
	  color: #888;
	  font-size: 26rpx;
      & + .item-btn {
        margin-left: 22rpx;
      }

      &.primary {
        color: #FFF;
        border: 1px solid #fb7601;
		background-color: #fb7601;
      }
    }
  }
}
</style>
